import React, { memo } from "react";
import { LoginWrapper } from "@/conptonents/app-login/style.js";
import Input from "antd/es/input/Input";
import IconWx from "../../assets/svg/icon_wx";
import { Checkbox } from "antd";
import IconEmail from "../../assets/svg/icon_email";
import IconGuanbi from "../../assets/svg/icon-guanbi";

const AppLogin = memo((props) => {
  function changeGuanBiClick() {
    props.changeGuanBiEmit();
  }

  return (
    <LoginWrapper>
      <div className="box">
        <div className="icon-guanbi" onClick={changeGuanBiClick}>
          <IconGuanbi className="icon-guanbi-a" />
        </div>
        <div className="box1">
          <div className="title">登录爱彼迎</div>
          <div className="desc">
            未注册的手机号或微信号验证后将自动创建新账号
          </div>
        </div>
        <div className="box2">
          <div className="input1">
            <Input placeholder="手机号" />
            <div className="icon">发送验证码</div>
          </div>
          <div className="input2">
            <Input placeholder="验证码" />
          </div>
          <div className="login">立即登录</div>
          <div className="general">
            <div>或</div>
          </div>
          <div className="wx">
            <div className="icon-wx">
              <IconWx />
            </div>
            <div className="wx-text">微信账号扫码登录</div>
          </div>
          <div className="general">
            <div>使用其他方式</div>
          </div>
          <div className="e-mail">
            <div className="icon-email">
              <IconEmail />
            </div>
            <div className="text">账号密码登录</div>
          </div>
        </div>
        <div className="box3">
          <div className="checkbox">
            <Checkbox className="check"></Checkbox>
          </div>
          <div className="info">
            我确认已年满18周岁、且已认真阅读并同意接受爱彼迎
            <span>《服务条款》</span>、<span>《隐私政策》</span> 、
            <span>《非歧视政策》</span> 、<span>《社区承诺》</span> 和
            <span>《房客可靠性标准》</span> 。
          </div>
        </div>
      </div>
    </LoginWrapper>
  );
});

export default AppLogin;
